<template>
    <!-- 全部户型开始 -->
    <div class="huxing">
      <h3>全部户型</h3>
      <span>房子可以租,生活不将就</span>
      <p @click="jumpTo()">查看更多 ></p>
      <div class="qb_hx">
        <div
          @click="jump(item.boyu_quid)"
          v-for="(item, index) of boyu_qhouse"
          :key="index"
        >
          <img class="qb_img" :src="item.boyu_qhphoto" />
          <p>{{ item.boyu_qhintroduce }}</p>
          <p class="price">
            <span>{{ item.boyu_qhprice.slice(0, -3) }}</span>
            元/月
          </p>
        </div>
      </div>
    </div>
    <!-- 全部户型结束--> 
</template>
<script>
    export default {
  data() {
    return {
      value: "",
      images: [
        "http://vky-oss.inboyu.com/upload/39e9f600-6b1d-3a23-2af5-13d48be74064.jpg",
        "http://vky-oss.inboyu.com/upload/39e9f600-ddfd-5c3f-cc26-58c1bfaab236.jpg",
        "http://vky-oss.inboyu.com/upload/39e9f603-9bf5-73a1-09af-558489f8d1cb.png"
      ],
      boyou_story: [],
      boyu_qhouse: [],
      boyu_mstore: [],
      boyu_hx: [],
      boyu_md: [],      
    };
  },
  mounted() {
    this.axios.get("/boyu/boyou").then(res => {
      this.boyou_story = res.data.results;
    });
    this.axios.get("/qhouse").then(res => {
      this.boyu_qhouse = res.data.results;
    });
    this.axios.get("/mstore").then(res => {
      this.boyu_mstore = res.data.results;
    });
    this.axios.get("/hx").then(res => {
      this.boyu_hx = res.data.results;
    });
    this.axios.get("/md").then(res => {
      this.boyu_hx = res.data.results;
    });
  },
  methods: {
    story(kw) {
      this.$router.push({
        path: "/story",
        query: {
          yid: kw
        }
      });
    },
    jump(kw) {
      this.$router.push({
        path: "/detail",
        query: {
          hid: kw
        }
      });
    },
    jump2(kw) {
      this.$router.push({
        path: "/mendian",
        query: {
          hid: kw
        }
      });
    },
    jumpToStory(kw) {
      this.$router.push({
        path: "/storys"
      });
    },
    jumpTo(kw) {
      this.$router.push({
        path: "/hx"
      });
    },
    jumpTomd(kw) {
      this.$router.push({
        path: "/md"
      });
    }
  }
};
</script>

<style scoped>
.city {
  display: block;
  text-align: center;
  line-height: 54px;
  font-weight: bold;
  color: black;
}

#sanjiao img {
  width: 10%;
}

.huxing {
  padding-left: 14px;
  padding-right: 14px;
}

.huxing > h3 {
  margin-bottom: 5px;
}

.huxing > span {
  color: #666;
}

.huxing > p {
  font-size: 14px;
  color: #888;
  float: right;
  margin-top: -22px;
}

ul,
li {
  list-style: none;
}

/*隐藏掉滚动条*/
.slide-box::-webkit-scrollbar {
  display: none;
}

.slide-box {
  margin-top: 20px;
  display: -webkit-box;
  overflow-x: auto;
  /*适应苹果*/
  -webkit-overflow-scrolling: touch;
}

.slide-item {
  width: 210px;
  /* border: 1px solid #fff; */
  margin-right: 10px;
  border-radius: 5px;
}

.slide-item > p {
  font-size: 14px;
  font-weight: 600;
  margin-top: 5px;
  margin-bottom: 2px;
}

.price > span {
  color: burlywood;
}

.biaq {
  font-size: 12px;
}

.biaq > span {
  border: 0.1em solid #888;
  border-radius: 3px;
  margin-right: 5px;
  padding: 0 5px;
  color: #888;
}

.img-items > img {
  width: 210px;
  height: 130px;
  border-radius: 5px;
}

.slide-item1 {
  width: 315px;
  /* border: 1px solid #fff; */
  margin-right: 10px;
  border-radius: 2%;
}

.slide-item1 > p {
  font-size: 17px;
  font-weight: 600;
  margin-top: 5px;
  margin-bottom: 2px;
}

.flexss {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #888;
}

.flexss > .price > span {
  color: burlywood;
  font-size: 18px;
}

.img1-items > img {
  width: 315px;
  height: 220px;
  border-radius: 5px;
}

.qb_hx {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.qb_hx div {
  flex: 0 0 47%;
  margin-top: 20px;
  margin-bottom: 15px;
}

.qb_hx img {
  width: 100%;
  height: 152px;
  border-radius: 5px;
}

.qb_hx p {
  margin-top: 3px;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
}
.qb_hx .qb_img {
  width: 100%;
  height: 121px;
}
</style>